<template>
	<view class="content">
		<uni-list>
			<uni-list-item clickable :showArrow="!isSave"   title="探测器名称" @click="openPopup"  :clickable="!isSave"
                     :rightText="isSave ? datainfo.slaveName:slaveName"

      />
			<uni-list-item title="气体"  :rightText="datainfo.propertyName" />


      <uni-datetime-picker ref="pickerRef1"
                           :disabled="isSave"
                           v-model="installDate"
                           type="date"
                           return-type="string">
		  	<uni-list-item title="安装时间"
                       :showArrow="!isSave"

                       :rightText="isSave ? dateformat(datainfo.installDate):installDate" />
      </uni-datetime-picker>



        <uni-list-item title="年检状态" >
				<template v-slot:footer>
					<text class="text-lg" :style="{color:checkStatusDes(datainfo.checkStatus).color}">
            {{ checkStatusDes(datainfo.checkStatus).text}}
          </text>
				</template>
			</uni-list-item>


			<uni-datetime-picker ref="pickerRef2"
                           v-model="checkStartDate"
                           type="date"
                           :disabled="isSave"
                           @change="changeStartDate"

                           return-type="string">
				<uni-list-item

                       :showArrow="!isSave"
                       title="年检开始时间"
                       :rightText="isSave ? dateformat(datainfo.checkStartDate): checkStartDate"
                     />
			</uni-datetime-picker>


			
			<uni-list-item title="年检结束时间" :rightText="isSave ? dateformat(datainfo.checkEndDate) : checkEndDate" />
		</uni-list>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" :value="slaveName" placeholder="请输入探测器名称"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
    <view class="button-container">
      <button v-if="isSave && auth('thing:building-device:updateDeviceSlave')" type="primary"
              class="button" @click="edit"
      >编辑</button>
      <button v-else type="primary" class="button" @click="save">更新</button>
    </view>
	</view>
</template>

<script>


import authMixin from '@/mixin/auth.js'
import { buildingDeviceGetSlave ,buildingDeviceUpdate} from "@/api/devices/index"
import dayjs from "dayjs";
	export default {
    mixins: [authMixin],
		data() {
			return {
        query:{
          deviceId:null,
          slaveId:null,
          propertyName:null
        },
				datainfo: {
          deviceId: null,
          id: null,
          checkEndDate:null,
          checkStartDate:null,
          installDate: null,
          checkStatus:1,
          propertyName: "",
          slaveName: ""
				},

				beginData:'',
        isSave:true,

        checkEndDate: "",
        checkStartDate: "",

        installDate: "",
        slaveName: "",


			}
		},

    onLoad(query){
        this.query = query
        this.queryData(query)
    },
		methods: {
      queryData(){
        const {deviceId,slaveId,propertyName} = this.query || {}
        buildingDeviceGetSlave({deviceId,modbusAddress:slaveId}).then(res=> {
          const data = res.data
          this.datainfo = data
          this.datainfo.propertyName = propertyName
          this.datainfo.id = slaveId
          this.datainfo.deviceId = deviceId
          const {checkStartDate,checkEndDate,installDate,slaveName} = data
          this.checkStartDate = this.dateformat(checkStartDate)
          this.checkEndDate =this.dateformat( checkEndDate)
          this.installDate = this.dateformat(installDate)
          this.slaveName = slaveName
        })
      },
      edit(){
        this.isSave = false
        //可以修改 名称   年检开始时间 和安装时间
      },
      save(){
        buildingDeviceUpdate({
          checkEndDate: this.checkEndDate,
          checkStartDate: this.checkStartDate,
          deviceId:  this.datainfo.deviceId ,
          modbusAddress: this.datainfo.id ,
          installDate: this.installDate,
          slaveName: this.slaveName,
        }).then(res=>{
          console.log('编辑修改结果>>>',res)
          if(res.data){
            uni.showToast({
              title:'更新成功',
              icon: 'success'
            })
          }
          this.queryData()
          this.isSave = true
					uni.$emit('refresh-detector',true)
        })
      },
      checkStatusDes (text) {
        if (text === 1){
          return {
            text:'年检中',
            color:'#197dfa'
          }
        }else if (text === 0){
          return {
            text:'即将过期',
            color:'#fcca61'
          }
        }else {
          return {
            text:'已过期',
            color:'#ff4d4f'
          }
        }
      },
      dateformat (date) {
        return date ? dayjs(date).format('YYYY-MM-DD') : ''
      },
      changeStartDate(date){
        const checkEndDate = dayjs(date).add(1, 'year')
        this.checkEndDate = this.dateformat(checkEndDate)
      },
			// openDatePick() {
      //   if(this.isSave){
      //     return
      //   }
			// 	console.log('this.$refs.pickerRef', this.$refs.pickerRef)
			// 	this.$refs.pickerRef.show()
			// },
			openPopup() {
          this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				// uni.showLoading({
				//   title: '3秒后会关闭'
				// })
				// uni.hideLoading()
				console.log('dialogInputConfirm>',val)
				this.slaveName = val
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			}
		}
	}
</script>

<style scoped>
.button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 40px;
  height: 50px;
}
.button {
  flex: 1;
  margin-right: 10px;
  margin-left: 10px;
  height: 100%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-radius: 5px;
  color: #ffffff;
  background-color:#007aff;
}

</style>